import Side from "./Side";
import Logo from "../Logo";
import News from "./News";
import Phone from "./Phone";
import User from "./User";
import { Tooltip, Popover, QRCode } from "antd";
export default function SideList(props: {
  collapse: boolean;
  changeCollapse: () => void;
}) {
  const handleClick = (id: number) => {
    if (id === 4 || id === 5) return;
    console.log("点击的数据：", id);
    switch (id) {
      case 1:
        props.changeCollapse();
    }
  };
  return [
    {
      name: "logo",
      component: <Logo className="cursor-pointer" />,
      id: 1,
      type: "tooltip",
    },
    {
      name: "side",
      title: "打开边栏",
      className: "mt-9",
      component: <Side />,
      id: 2,
      type: "tooltip",
    },
    {
      name: "news",
      title: "开启新对话",
      className: "mt-8",
      component: <News />,
      id: 3,
      type: "tooltip",
    },
    {
      name: "space",
      component: <div></div>,
      id: 4,

      className: "flex-1",
    },
    {
      name: "phone",
      component: <Phone />,
      id: 5,
      type: "popover",
      content: (
        <div className="flex flex-col items-center">
          <QRCode
            className="qrCode w-40 h-40 p-0"
            type="canvas"
            value="https://ant.design/"
            icon="/logo.svg"
          />
          <p className="mt-2">扫码下载 DeepSeek APP</p>
        </div>
      ),
    },
    { name: "user", component: <User />, id: 6 },
  ].map((item) => {
    return item.type === "tooltip" || !item.type ? (
      <Tooltip key={item.id} title={item.title} placement="topLeft">
        <div className={item.className} onClick={() => handleClick(item.id)}>
          {item.component}
        </div>
      </Tooltip>
    ) : (
      <Popover
        key={item.id}
        content={item.content}
        placement="topLeft"
        arrow={{ pointAtCenter: true }}
      >
        <div className={item.className} onClick={() => handleClick(item.id)}>
          {item.component}
        </div>
      </Popover>
    );
  });
}
